import React, { useState, useEffect } from 'react';
import { Input, Card, Row, Col, Spin, Empty, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const { Search } = Input;

const ProductSearch = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');

  // 搜索商品
  const handleSearch = (value) => {
    setSearchKeyword(value);
    setLoading(true);
    // 模拟搜索
    setTimeout(() => {
      setProducts([
        { id: 1, name: '测试商品1', price: 99.99, description: '这是一个测试商品' },
        { id: 2, name: '测试商品2', price: 199.99, description: '这是另一个测试商品' }
      ]);
      setLoading(false);
    }, 1000);
  };

  useEffect(() => {
    // 初始加载一些商品
    handleSearch('');
  }, []);

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '24px' }}>
        <h2>商品搜索</h2>
        <Search
          placeholder="请输入商品名称"
          allowClear
          enterButton={<SearchOutlined />}
          size="large"
          onSearch={handleSearch}
          style={{ maxWidth: '600px' }}
        />
      </div>
      
      <Spin spinning={loading}>
        {products.length > 0 ? (
          <Row gutter={[16, 16]}>
            {products.map(product => (
              <Col xs={24} sm={12} md={8} lg={6} key={product.id}>
                <Card
                  title={product.name}
                  extra={`¥${product.price}`}
                  hoverable
                >
                  <p>{product.description}</p>
                </Card>
              </Col>
            ))}
          </Row>
        ) : (
          !loading && <Empty description="暂无商品" />
        )}
      </Spin>
    </div>
  );
};

export default ProductSearch;